<template>
  <div class="app-container">
    <el-card>

      <el-table
        v-loading="listLoading"
        :data="dataList"
        style="width: 100%;margin-top:10px;"
        max-height="600px"
        border
        highlight-current-row
        :header-cell-style="{background:'#f5f7fa'}"
      >
        <el-table-column align="center" prop="club" label="申请的社团" />
        <el-table-column align="center" prop="realname" label="申请人" />
        <el-table-column align="center" prop="created_time" label="申请日期" />
        <el-table-column label="会议记录" align="center" width="150">
          <template slot-scope="{row}">
            <el-tooltip class="item" effect="dark" :content="row.record" placement="top-start">
              <span v-if="row.record.length > 8">{{ row.record.substring(0,8) }}...</span>
              <span v-else> {{ row.record }} </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="80px" align="center">
          <template slot-scope="{row}">
            <el-button
              type="success"
              size="mini"
              plain
              icon="el-icon-check"
              @click="showViewDialog(row)"
            > 审核 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </el-card>

    <el-dialog
      :title="dialogText"
      :visible.sync="dialogViewFormVisible"
      width="50%"
    >
      <el-descriptions
        title="申请信息"
        direction="vertical"
        :column="2"
        border
      >
        <el-descriptions-item label="申请的社团">{{ form.club }}</el-descriptions-item>
        <el-descriptions-item label="申请人">{{ form.realname }}</el-descriptions-item>
        <el-descriptions-item label="申请日期">{{ form.created_time }}</el-descriptions-item>
        <el-descriptions-item label="会议记录">{{ form.record }}</el-descriptions-item>
      </el-descriptions>

      <el-form ref="form" :model="form" status-icon label-position="top" :rules="rules">
        <el-form-item label="会议照片">
          <el-upload
            action="#"
            disabled
            :file-list="form.image"
            class="hideImageUpload"
            list-type="picture-card"
          >
            <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
              <viewer ref="viewer" style="width:100%;height:100%">
                <img
                  style="width:100%;height:100%"
                  :src="file.url"
                  alt=""
                >
              </viewer>
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="previewImage(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="申请文件">
          <el-upload
            class="hideImageUpload"
            action="#"
            disabled
            :on-preview="previewFile"
            :file-list="form.files"
          />
        </el-form-item>

        <el-form-item>
          <el-collapse v-model="activeName">
            <el-collapse-item name="check_history">
              <template slot="title">
                <span style="font-size:14px;margin-left:10px;">历史审核记录</span>
                <i class="header-icon el-icon-success" />
              </template>
              <div class="block" style="margin-left:100px;">
                <el-timeline>
                  <el-timeline-item
                    v-for="(item, index) in form.check_history"
                    :key="index"
                    :timestamp="item.created_time"
                    :color="index===0? '#0bbd87': ''"
                    :size="index===0? 'large': 'normal'"
                  >
                    {{ item.check_level_name }}状态:
                    <el-tag :type="item.check_status | statusFilter" style="margin-left:10px;">
                      {{ item.check_status }}
                    </el-tag>
                    <br>
                    {{ item.check_level_name }}意见:
                    <span style="margin-left: 10px;">
                      {{ item.check_opinion }}
                    </span>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-form-item>

        <el-form-item label="审核状态" prop="check_status">
          <el-select v-model="form.check_status" placeholder="请选择">
            <el-option label="通过" value="通过" />
            <el-option label="不通过" value="不通过" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核意见" prop="check_opinion">
          <el-input v-model="form.check_opinion" :autosize="{minRows:4,maxRows:4}" type="textarea" placeholder="请输入审核意见" size="small" />
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit()">提交审核</el-button>
        <el-button @click.native="dialogViewFormVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>

    <el-image-viewer
      v-if="previewImg"
      :on-close="closePreviewImage"
      :url-list="imgList"
      :z-index="9999"
    />

  </div>
</template>

<script src="./index.js"></script>

<style lang="scss">
.el-dialog__body .action {
  position: absolute;
  right: 5px;
  top: 0;
  line-height: inherit;
}
.hideImageUpload .el-upload--picture-card {
  display: none;
}
.hideImageUpload .el-upload--text {
  display: none;
}
</style>
